<template>

  <view
    class="rocket"
    ref="rocketRef"
        :style="{ left: elementX + 'px', top: elementY + 'px' }"
        @touchstart="startDrag"
        @touchend="stopDrag"
        @touchmove.prevent="drag"
        @click="jump('/pagesScript/car/creat')"
  >
    <view class="rocket-circle tc">
      <view class="rocket-circle-arrow">
        <uv-icon color="#f2f2f2" size="45" name="custom-icon-huojian"></uv-icon>
      </view>
    </view>
    <view class="rocket-btn">发起约车</view>
  </view>

</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted,getCurrentInstance } from 'vue';  //@click="jump('/pagesScript/car/creat')"
import { useMousePosition } from '@/hooks/useMousePosition.js';
import { jump } from '@/utils/index'

const props = defineProps({
  initialX: Number,
  initialY: Number
})
const rocketRef = ref(null);
const isDragging = ref(false);
const offsetX = ref(0);
const offsetY = ref(0);
const elementX = ref(props.initialX || 0);
const elementY = ref(props.initialY || 0);
const currentObj = getCurrentInstance();

const startDrag = (event) => {
  isDragging.value = true;
  if (event.touches && event.touches.length > 0) {
    const touch = event.touches[0];
    offsetX.value = (touch.clientX - event.currentTarget.offsetLeft).toFixed(1);
    offsetY.value = (touch.clientY - event.currentTarget.offsetTop).toFixed(1);
  }
  //window.addEventListener('touchmove', drag);
};

const drag = (event) => {
  const touch = event.touches[0];
  if (isDragging.value) {
    elementX.value = (touch.clientX - offsetX.value).toFixed(1);
    elementY.value = (touch.clientY - offsetY.value).toFixed(1);
  }
};

const stopDrag = () => {
  console.log('stop')
  isDragging.value = false;
  //window.removeEventListener('touchmove', drag);
};

onMounted(() => {
  let width = uni.getWindowInfo().windowWidth;
  let elWidth = 0;
  //let elWidth = rocketRef.value.$el.clientWidth;
  wx.createSelectorQuery().in(currentObj).select('.rocket').boundingClientRect(function(rect){
    elWidth = rect.width;
    elementX.value = (width - elWidth - 10) || 0;
    elementY.value = props.initialY || 0;
  }).exec()

});

/*return {
  posX: elementX,
  posY: elementY,
  startDrag,
  stopDrag
};*/

</script>

<style lang="scss" scoped>

.rocket{
  position:fixed;
  width: 120rpx;
  height: 120rpx;
  z-index: 10;
  &-circle{
    position: relative;
    width: 86%;
    height: 86%;
    margin: 0 auto;
    border-radius: 100%;
    background-color: #FBA64D;
    &-arrow{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-55%);
    }
  }
  &-btn{
    text-align: center;
    font-size: 24rpx;
    padding:5rpx 0;
    color:#f2f2f2;
    border-radius: 20rpx;
    position: absolute;
    bottom: 0rpx;
    width: 100%;
    background-color: #FC7F3F;
  }
}



</style>
